<template>
    <div id="menu">
        <ul>
            <li v-for="m in meanMsg" @click="queryAllHotel(m.name)">
                <router-link :to="{path: m.path,query:{name:m.name}} ">{{m.name}}</router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        data: function () {
            return {
                meanMsg: [
                    { name: "首页", path: "/" },
                    { name: "乐园", path: "/park" },
                    { name: "演出", path: "/show" },
                    { name: "酒店", path: "/hotel" },
                    { name: "美食", path: "/food" },
                    { name: "跨园求票", path: "/" },
                    { name: "动物学院", path: "/" },
                    { name: "会员中心", path: "/" },
                    { name: "订单查询", path: "/" },
                    { name: "二维码门票", path: "/" },
                    { name: "客服中心", path: "/" }
                ]
            }
        },
        computed: {
            ...mapState([
                "isShowMenu"
            ])
        },
        methods: {
            queryAllHotel: function (name) {

                var data = this.isShowMenu ? false : true;
                this.$store.commit("setIsShowMenu", data);

                var params = {
                    name: name
                }
                this.$store.dispatch("queryAH", params)
                    .then(res => {
                        console.log(res)
                        // var hotelMsg=[];
                        var obj = {};
                        var arr = res.data.data.has;
                        
                        arr.forEach(function(e) {
                            if(!obj[e.belongs.name]){
                               obj[e.belongs.name]=[]; 
                            }
                             obj[e.belongs.name].push(e);
                            
                        }, this);
                        this.$store.commit("setAllHotel",obj);
                    });
            }
        }
    }

</script>

<style scoped>
    #menu {
        height: calc(100vh - 0.44rem);
        position: fixed;
        top: 0.54rem;
        left: 0;
        z-index: 1000;
        background-color: white;
    }

    ul {
        margin: 0;
        padding: 0;
        height: 100%;
    }

    li {
        width: 1.3rem;
        height: 8%;
        display: flex;
        align-items: center;
        padding-left: 0.1rem;
        border-bottom: 1px solid #f1f1f1;
    }
</style>